<template>
	<view class="address-form-container">
		<view class="address-form">
			<!-- 默认收货地址选项 -->
			<view class="default-address">
				<p class="tx">填写地址</p>
				<u-checkbox v-model="isDefault" shape="circle" label="" size="33" iconSize="24"
					@change="toggleDefaultAddress"></u-checkbox>
				<text>默认收货地址</text>
			</view>

			<!-- 收货人信息 -->
			<view class="receiver-info">
				<text>收货人*</text>
				<input type="text" v-model="receiverName" placeholder="姓名" id="name" />
				<image src="" mode=""></image>
			</view>

			<!-- 联系电话信息 -->
			<view class="contact-info">
				<text>联系电话*</text>
				<input type="text" v-model="contactNumber" placeholder="手机号码" id="phone" />
				<text class="error-message" v-if="!validatePhoneNumber(contactNumber)">请输入有效的手机号码</text>
			</view>

			<!-- 所在地区信息 -->
			<view class="address-info">
				<text>所在地区省</text>
				<input type="text" v-model="province" placeholder="省" />
			</view>
			<view class="address-info">
				<text>所在地区市</text>
				<input type="text" v-model="city" placeholder="市" />
			</view>
			<view class="address-info">
				<text>所在地区区或县</text>
				<input type="text" v-model="district" placeholder="区或县" />
			</view>
			<!-- 详细地址信息 -->
			<view class="detailed-address">
				<text>详细地址*</text>
				<input type="text" v-model="detailedAddress" placeholder="小区，门牌号等" />
				<image src="" mode=""></image>
			</view>
		</view>
		<view class="GGBoon">
			<!-- 保存地址按钮 -->
			<button class="save-address-button" :class="{ 'disabled-button': !isFormValid }" :disabled="!isFormValid"
				@click="saveAddress()" >
				保存地址
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
		    return {
		        receiverName: '',
		        contactNumber: '',
		        province: '',
		        city: '',
		        district: '',
		        detailedAddress: '',
		        isDefault: false,
		        phoneRegex: /^1[3456789]\d{9}$/  // 手机号正则表达式
		    };
		},
		computed: {
		    isFormValid() {
		        return this.receiverName !== '' &&
		            this.contactNumber !== '' &&
		            this.province !== '' &&
		            this.city !== '' &&
		            this.district !== '' &&
		            this.detailedAddress !== '' &&
		            this.validatePhoneNumber(this.contactNumber); // 加入手机号验证条件
		    }
		},
		methods: {
		    toggleDefaultAddress() {
		        this.isDefault = !this.isDefault;
		    },
		    validatePhoneNumber(number) {
		        return this.phoneRegex.test(number);
		    },
		    saveAddress() {
		        if (!this.validatePhoneNumber(this.contactNumber)) {
		            // 手机号码验证失败，可以在这里处理提示用户
		            console.log('请输入有效的手机号码');
		            return;
		        }
		
				let isDefaultFlag = this.isDefault ? 1 : 0; // 如果选中默认地址，传值为1，否则为0
		        let addressData = {
		            userId:  uni.getStorageSync('id'),
		            recipientName: this.receiverName,
		            phoneNumber: this.contactNumber,
		            addressLine: this.detailedAddress,
		            districtOrCounty: this.district,
		            city: this.city,
		            state: this.province,
		            defaultStatus: isDefaultFlag
		        };
		
		        console.log(addressData);
		        // 发送请求给后端
		        this.request("/addresses/insertaddress", "post", addressData).then(
		            (res) => {
		                console.log(res);
		            }).catch((err) => {
		                console.log(err);
		            });
				uni.navigateBack({
					delta:1
				})
		    }
		}
	};
</script>
<style>
	.error-message {
			color: red;
			font-size: 12px;
			margin-top: 4px;
		}
	.znnr {
		width: 100%;
		height: 100rpx;
		border-radius: 40rpx;
		margin-top: 30rpx;
		background-color: #fafafa;
	}

	.tx {
		margin-right: 280rpx;
	}

	page {
		background-color: #fafafa;
	}

	.address-form-container {
		/* margin-left: 30rpx; */
	}

	.address-form {
		width: 100%;
		height: 800rpx;
		padding: 20px;
		margin-top: 50rpx;
		border-radius: 40rpx;
		background-color: white;
	}

	.default-address {
		width: 700rpx;
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.default-address p {}

	.default-address text {
		color: #767676;
	}

	.default-address switch {
		margin-left: 220rpx;
	}

	.receiver-info,
	.contact-info,
	.address-info,
	.detailed-address {
		width: 690rpx;
		height: 125rpx;
		display: flex;
		align-items: center;
		margin-left: 2rpx;
		/* margin-top: 50rpx; */
		border-top: 2rpx solid #d7d7d7;
	}

	.receiver-info image,
	.detailed-address image {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
		margin-top: -20rpx;
	}

	.receiver-info input,
	.contact-info input,
	.address-info input,
	.detailed-address input {
		margin-top: -20rpx;
		margin-left: 50rpx;
		flex: 1;
	}

	.receiver-info text,
	.contact-info text,
	.address-info text,
	.detailed-address text {
		margin-top: -20rpx;
	}

	.location-icon {
		width: 20px;
		height: 20px;
		margin-left: 10px;
	}

	/* .smart-input text {
		margin-left: 40rpx;
		display: inline-block;
		margin-top: 30rpx;
		font-size: 35rpx;
	}

	.smart-input{
		display: flex;
	}
	 */
	/* .smart-input input {
		  text-align: center; /* 文本居中 */
	/* display: flex; */
	/* 弹性布局 */
	/* justify-content: center; */
	/* 子元素水平居中 */
	/* align-items: center; */
	/* 子元素垂直居中 */
	/* } */

	.save-address-button {
		width: 88%;
		height: 80rpx;
		background-color: #f00;
		color: #fff;
		border-radius: 100rpx;
		position: fixed;
		bottom: 20rpx;
		line-height: 80rpx;
		border: none;
		outline: none;
		cursor: pointer;
	}

	.disabled-button::after {
		background-color: #ff9999;
		/* 淡红色 */
		color: #ffffff;
		/* 按钮文字颜色，确保可读性 */
		pointer-events: none;
		/* 禁止点击 */
		opacity: 0.7;
		/* 降低透明度，增加不可点击的感觉 */
	}

	.disabled-button:hover {
		transform: none;
		box-shadow: none;
	}

	.GGBoon {
		width: 100%;
		height: 80rpx;
		/* 	margin-top: 100rpx;
		border-radius: 40rpx; */
		display: flex;
		justify-content: center;
	}
</style>